<template>
    <van-index-bar>
        <span v-for="item in citylist" :key="item.firstword">
            <van-index-anchor :index=item.firstword />
            <van-cell :title="data.name" v-for="data in item.city" :key="data.cityId" @click="handlechange(data.name,data.cityId)" />
        </span>
    </van-index-bar>
</template>

<script>
import http from '@/util/http';
export default {
    mounted(){
        http({
            url:'/gateway?k=2642272',
            headers:{
                'X-Host': 'mall.film-ticket.city.list'
            }
        }).then(res=>{
            this.beforelist = res.data.data.cities

            // 包装citylist
            for(var i=65 ; i<91 ;i++){
                var obj = {city:[]}
                this.beforelist.forEach(item => {
                    if(item.pinyin.substr(0,1).toUpperCase() === String.fromCharCode(i)){
                        obj.firstword = String.fromCharCode(i)
                        obj.city.push(item)
                    }
                })
                if(obj.city.length !==0 ){
                    this.citylist.push(obj)
                }
            }
        })

        
        console.log(this.citylist)
    },
    data(){
        return{
            beforelist:[],
            citylist:[]
        }
    },
    methods:{
        handlechange(name,id){
            this.$store.commit('changeCity',{name,id})
            this.$router.back()
        }
    }
}
</script>